<template>

  <a-modal
    :mask-closable="false"
    :visible="flightLegHistoryVisibleF"
    title="历史航段 - Flight Leg History"
    :class="['c-dialog-box',singlePage?'c-dialog-box-full':'']"
    :closable="!singlePage"
    :dialog-style="{height:'574px'}"
    :footer="null"
    :width="1132"
    :z-index="modalZIndexM"
    destroy-on-close
    centered
    @cancel="onClose"
  >
    <span slot="closeIcon" class="c-close-icon"><a-icon :component="require('@/assets/icon/close.svg')" /></span>
    <span v-if="!singlePage" class="new-page-btn" @click="goNewPageHandler(flhuuid)"><a-icon :component="require('@/assets/icon/newPage.svg')" /></span>
    <!-- info -->
    <a-spin :spinning="flightLegHistoryLoading" class="c-dialog-search-box">
      <a-row class="c-dialog-search-box-2">
        <a-col :span="2">
          <div class="fw-b fs-12 color-r">机号</div>
          <div class="fs-18 fw-b color-title numbers">{{ currentRow.tailnumber ||'--' }}</div>
        </a-col>
        <a-col :span="3">
          <div class="fw-b fs-12 color-r">机队</div>
          <div class="fs-18 fw-b color-title numbers">{{ currentRow.fleet||'--' }}</div>
        </a-col>
        <!-- <a-col :span="2">

          <div class="fw-b fs-12 color-r">序列号</div>
          <div class="fs-18 fw-b color-title numbers">{{ currentRow.serialNumber||'--' }}</div>
        </a-col> -->
        <a-col :span="4">
          <div class="fw-b fs-12 color-r">更新时间</div>
          <div class="fw-b ">
            <span class="fs-16 color-title mr-4">{{ currentRow.latestAcarsTime? $moment.utc(currentRow.latestAcarsTime).format('YYYY-MM-DD HH:mm:ss') :'--' }}</span>
          </div>
        </a-col>
        <a-col :span="13" class="pt-5">
          <a-form-model layout="inline" :model="search">
            <a-form-model-item label="">
              <a-select
                v-model="search.legs"
                show-arrow
                style="minWidth: 130px"
                allow-clear
                :get-popup-container="triggerNode => triggerNode.parentNode || document.body"
                placeholder="航段数"
              >
                <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
                <a-select-option v-for="item in legsArr" :key="item" :value="item">
                  {{ item }}
                </a-select-option>

              </a-select>
            </a-form-model-item>
            <a-form-model-item label="">
              <a-select
                v-model="timeSelected"
                show-arrow
                style="minWidth: 130px"
                placeholder="时间范围"
                allow-clear
                :get-popup-container="triggerNode => triggerNode.parentNode || document.body"
                @select="selectTimeHandler"
              >
                <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
                <a-select-option v-for="item in timeRange" :key="item" :value="item">
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" ghost @click="resetSearchHandler">
                重置
              </a-button>
              <a-button type="primary" class="ml-15" :loading="flightLegHistoryLoading" @click="getData">
                查询
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </a-col>
      </a-row>
    </a-spin>
    <!-- search -->

    <!-- table -->

    <a-spin :spinning="flightLegHistoryLoading" class="c-dialog-main-box beauty-scroll">
      <vxe-grid
        ref="xTable1"
        class="event-trigger-packet-upload"
        show-overflow
        stripe
        highlight-hover-row
        :columns="columns"
        :data="flightLegHistoryList"
        :height="vxeH"
        :sort-config="{trigger: 'cell'}"
      />
    </a-spin>
  </a-modal>
</template>

<script>
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex';
export default {
  props: {
    // currentRow: {
    //   type: Object,
    //   default: () => {}
    // },
    flightLegHistoryVisible: {
      type: Boolean,
      default: false
    },
    reportHandler: {
      type: Function,
      default() {
        return function() {};
      }
    }

  },
  data() {
    return {
      modalZIndexM: 2000,
      currentRow: {},
      vxeH: '395px',
      legsArr: [1, 10, 20, 50, 100],
      timeRange: ['本周', '本月', '最近三个月', '最近六个月', '最近一年'],
      timeSelected: undefined,
      search: {},
      flhuuid: '',
      columns: [
        {
          title: '故障级别',
          align: 'left',
          dataIndex: 'priority',
          width: 100,
          slots: {
            default: ({ row }) => {
              return [<noticePriorityIcon is-etops={row.etopsFlight} priority={row.priority} msg-type='FDE' />];
            }
          }
        },
        {
          title: '航段',
          align: 'left',
          dataIndex: 'leg',
          width: 60,
          slots: {
            default: ({ row }) => {
              return this.$legHandler(row.leg, row.totalLeg);
            }
          }
        },
        {
          title: '航班号',
          align: 'left',
          dataIndex: 'flightNo',
          width: 80,
          slots: {
            default: ({ row }) => {
              return row.flightNo ? [<a onClick={(e) => this.reportHandler(row, 'flightLegDetailsVisible')}>{row.flightNo}</a>] : '--';
            }
          }
        },
        {
          title: '报告',
          align: 'left',
          dataIndex: 'efReport',
          width: 105,
          slots: {
            default: ({ row }) => {
              const rep = [];
              if (row.efReport) {
                rep.push(<a class='mr-8' onClick={(e) => this.reportHandler(row, 'efReportVisible')}>EF</a>);
              }
              if (row.isFault) {
                rep.push(<a class='mr-8' onClick={(e) => this.reportHandler(row, 'faultReportVisible')}>FS</a>);
              }
              if (row.isSnapshot) {
                rep.push(<a class='mr-8' onClick={(e) => this.reportHandler(row, 'snapshotVisible')}>S</a>);
              }
              if (row.isResearch) {
                rep.push(<a onClick={(e) => this.reportHandler(row, 'taskResearchVisible')}>R</a>);
              }
              return rep.length > 0 ? rep : '--';
            }
          }
        },
        {
          title: '起飞时间',
          align: 'left',
          dataIndex: 'outTime',
          slots: {
            default: ({ row }) => {
              const value = row.outTime;
              return [
                <div class='fs-12'>
                  {value ? this.$moment.utc(value).format('YYYY-MM-DD HH:mm:ss') : '--'}
                </div>
              ];
            }
          }
        },
        {
          title: '起飞机场',
          align: 'left',
          dataIndex: 'dep',
          width: 80,
          slots: {
            default: ({ row }) => {
              return [<a onClick={(e) => this.airportInfoHandler(e, row.dep)}>{row.dep || '--'}</a>];
            }
          }
        },
        {
          dataIndex: 'arrow',
          align: 'left',
          width: 50,
          slots: {
            default: ({ row }) => {
              return [<a-icon component={require('@/assets/icon/r-arrow.svg')}/>];
            }
          }
        },
        {
          title: '落地机场',
          dataIndex: 'arr',
          align: 'left',
          width: 80,
          slots: {
            default: ({ row }) => {
              return [<a onClick={(e) => this.airportInfoHandler(e, row.arr)}>{row.arr || '--'}</a>];
            }
          }
        },
        {
          title: '完成时间',
          dataIndex: 'inTime',
          align: 'left',
          slots: {
            default: ({ row }) => {
              const value = row.inTime;
              return [
                <div class='fs-12'>
                  {value ? this.$moment.utc(value).format('YYYY-MM-DD HH:mm:ss') : '--'}
                </div>
              ];
            }
          }
        },
        {
          title: '飞行时间(mins)',
          dataIndex: 'flight',
          width: 122,
          align: 'left',
          slots: {
            default: ({ row }) => {
              return row.flight || '--';
            }
          }
        },
        {
          title: '在地时间(mins)',
          dataIndex: 'ground',
          align: 'left',
          width: 122,
          slots: {
            default: ({ row }) => {
              return row.ground || '--';
            }
          }
        }
      ]
    };
  },
  computed: {
    ...mapState('fraMonitoring', [
      'flightLegHistoryList',
      'flightLegHistoryLoading',
      'modalZIndex'
    ]),
    ...mapGetters('fraMonitoring', [
      'flightLegHistoryVisibleF'
    ]),
    singlePage() {
      return ((this.$route.meta?.singlePage ?? false) && this.$route.query.rp === 'flightLegHistoryVisible');
    }

  },
  watch: {
    'flightLegHistoryVisibleF': {
      handler(nv) {
        // console.log('asdasd' + nv);

        if (nv) {
          this.setState({ key: 'modalZIndex', payload: this.modalZIndex + 1 });
          this.modalZIndexM = this.modalZIndex;
          this.flhuuid = this.$route?.query?.flhuuid ?? new Date().getTime();
          const lsRow = sessionStorage.getItem(`flh${this.flhuuid}`) ?? localStorage.getItem('scRow') ?? localStorage.getItem('row');
          this.currentRow = JSON.parse(lsRow) ?? {};

          if (this.$store.state.setting.openType === '_blank' && !this.$route?.query?.flhuuid) {
            this.goNewPageHandler(this.flhuuid);
            this.setState({ key: 'flightLegHistoryVisible', payload: false });
          } else {
            this.vxeH = this.singlePage ? `${document.body.clientHeight - 180}px` : '395px';

            this.resetSearchHandler();
          }
        }
      },
      immediate: true
    }

  },
  methods: {
    ...mapActions('fraMonitoring', [
      'getFlightLegHistoryList'
    ]),
    ...mapMutations('fraMonitoring', [
      'setState'
    ]),
    // 当drawer点击关闭
    onClose() {
      // localStorage.setItem('showModal', []);
      this.$emit('close', 'flightLegHistoryVisible');
    },
    airportInfoHandler(e, code) {
      e.stopPropagation();
      this.setState({ key: 'airportInfoVisible', payload: true });
      localStorage.setItem('apInfoCode', code);
    },
    getData() {
      this.getFlightLegHistoryList(this.search);
    },
    resetSearchHandler() {
      this.search = {};
      this.timeSelected = undefined;
      this.search.tailNumber = this.currentRow.tailnumber;
      this.getData();
    },
    selectTimeHandler(t) {
      switch (t) {
        case '本周':
          this.search.timeRange = 7;
          break;
        case '本月':
          this.search.timeRange = this.$moment.utc().daysInMonth();
          break;
        case '最近三个月':
          this.search.timeRange = this.$moment.utc().diff(this.$moment.utc().add(-3, 'M'), 'day');
          break;
        case '最近六个月':
          this.search.timeRange = this.$moment.utc().diff(this.$moment.utc().add(-6, 'M'), 'day');
          break;
        case '最近一年':
          this.search.timeRange = this.$moment.utc().diff(this.$moment.utc().add(-1, 'y'), 'day');
          break;
      }
    },
    goNewPageHandler(flhuuid = '') {
      sessionStorage.setItem(`flh${flhuuid}`, JSON.stringify(this.currentRow));

      const routeData = this.$router.resolve({
        path: '/reportsLayout',
        query: {
          rp: 'flightLegHistoryVisible',
          flhuuid
        }
      });

      window.open(routeData.href, '_blank');
    }
  }
};
</script>

<style lang="less">
@import './index.less';
</style>
